<template>
  <view class="container-root">
    <view class="inner-wrap">
      <view class="logo-name">{{commonStore.setting?.siteName}}</view>
      <view class="login-phone">
        <view class="input-wrap">
					<input type="text" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
				</view>
        <view class="input-wrap">
					<input type="number" v-model="form.code" placeholder="请输入验证码" />
					<text @click="handleSendCode">{{second > 0 ? second + '秒后可重新发送' : '发送验证码'}}</text>
				</view>
        <button @click="handlePhoneLogin" class="btn btn-primary" >同意协议 并 注册/登录</button>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { reactive,ref } from 'vue'
import { PhoneSendcode, PhoneLogin } from '@/api/member'
import { useMemberStore } from '@/stores/member'
import { useCommonStore } from '@/stores/common'
const memberStore = useMemberStore()
const commonStore  = useCommonStore()
interface Props {
    back:number
}
const props = withDefaults(defineProps<Props>(), {
  back: 1
})
/**
 * 表单数据
 */
const form = reactive({
  phone:'',
  code:''
})
const second =ref<number>(0)

/**
 * 发送验证码
 */
const handleSendCode = () => {
    if (form.phone.length !== 11) {
      return uni.showToast({
        title: '请填写11位手机号',
        icon: 'none'
      })
    }
    PhoneSendcode(form.phone).then((res:ResponseData<any>) => {
      if(res.success) {
        second.value = 59
        const timer = setInterval(() => {
          second.value--
          if (second.value <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      }
    })
}
/**
 * 手机号登录
 */
const handlePhoneLogin = () => {
  if (form.phone.length !== 11) {
    return uni.showToast({
      title: '请填写11位手机号',
      icon: 'none'
    })
  }
  if(!form.code) {
    return uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
  }
  PhoneLogin(form.phone,form.code).then((res:ResponseData<MemberToken>) => {
    if(res.success) {
      if(res.data)
        memberStore.setMemberToken(res.data)
        uni.navigateBack({delta:props.back})
    } else if(res.msg) {
      return uni.showToast({
        title:  res.msg,
        icon: 'none'
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.container-root{
		background-color: #fff;
		display:flex;
		align-items:center;
		flex-direction:column;
}
.inner-wrap {
  display:flex;
  flex: 1;
  padding-top:65rpx;
  align-items:center;
  flex-direction:column;
  min-height: 1060rpx;
}
.logo-name{
		padding:0 36rpx;
}
.login-phone {
  margin: 24rpx 80rpx;
  .input-wrap {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    margin-top: 48rpx;
    border-radius: 44rpx;
    background-color: #F5F6F7;
    input {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
		}
    text {
      margin-left: 24rpx;
      color: #6F84A3;
		}
  }
}
.btn {
  margin-top: 80rpx;
  border-radius: 44rpx;
  line-height: 88rpx;
}
</style>